<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html  lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>登录系统</title>
    <link href="static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="static/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="static/css/style.css" rel="stylesheet"/>
    <link href="static/css/login.min.css" rel="stylesheet"/>
    <link href="static/ruoyi/css/ry-ui.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="favicon.ico"/>
    <script>
        if(window.top !== window.self){window.top.location = window.location};
    </script>
    <link rel="stylesheet" href="static/js/jconfirm/jquery-confirm.min.css">
</head>
<body class="signin">
    <div class="signinpanel">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                    <div class="m-b"></div>
                    <h4>欢迎使用 <strong> 后台管理系统</strong></h4>
                    <ul class="m-b">
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 绿茶</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 红茶</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 黑茶</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 白茶</li>
                    </ul>
                    <strong>还没有账号？ <a href="register.jsp">立即注册&raquo;</a></strong><br/>
                    <strong>忘记了密码？ <a href="findpwd.jsp">找回密码&raquo;</a></strong><br/>
                    <strong>账号被冻结？ <a class="application">申请解冻&raquo;</a></strong>
                </div>
            </div>
            <div class="col-sm-5">
                <form action="login.do" method="post" onsubmit="return Login.login();" style="color: #0a0a0a" >
                    <h4 class="no-margins">登录：
                    	<span style="color:red;">
	                    	<c:if test="${Result == 'failed' }">
	                			${message }
	                		</c:if>
                    	</span>
                    </h4>
                    
                    <input type="email" id="email" name="email" class="form-control" required placeholder="邮箱"/>
                    <input type="password" id="password" name="password" class="form-control" required placeholder="密码"/>
					<div class="row m-t">
						<div class="col-xs-5">
						    <input type="text" name="validateCode" class="form-control" required placeholder="验证码">
						</div>
						<div class="col-xs-6">
                            <button type="button" class="btn btn-sm btn-success" onclick="Login.getCode();">点击发送验证码</button>
						</div>
					</div>
					
                    <button class="btn btn-success btn-block" type="submit" data-loading="正在验证登录，请稍后...">登录</button>
                </form>                
            </div>
        </div>
        <div class="signup-footer">
            <div class="pull-left">
                Copyright © 2019. 蓝点工作室 All rights reserved.  <br>
            </div>
        </div>
    </div>

    <input class="response_code" type="hidden"/>

<!-- 全局js -->
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jconfirm/jquery-confirm.min.js"></script>
<!-- 验证插件 -->
<script src="static/ajax/libs/validate/jquery.validate.min.js"></script>
<script src="static/ajax/libs/validate/messages_zh.min.js"></script>
<script src="static/ajax/libs/layer/layer.min.js"></script>
<script src="static/ajax/libs/blockUI/jquery.blockUI.js"></script>
<script src="static/ruoyi/js/ry-ui.js"></script>
<script>

    let Login = {
        email : "",
        password : "",
        code : "",
        getCode : function () { //点击,获取验证码

            let email = $("#email").val();

            if(email == null || email == ""){
                $.modal.alert("邮箱不能为空");
                return false;
            }
        
            let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(email)){
                $.modal.alert("邮箱格式不正确");
                return false;
            }

            $.ajax({
                type:"GET",
                url:"getCode.do?email="+email,
                dataType:"json",
                success:function (response) {

                    if(response.Result == "success"){
                        $.modal.alert("验证码已发送至："+email);

                        $(".response_code").val(response.code);

                    } else {
                        $.modal.alert(response.message);
                    }
                }
            });

            setTime("#getCode");
        },
        login : function () {
            this.email = $("#email").val();
            this.password = $("#password").val();
            this.code = $("#code").val();

            let response_code = $(".response_code").val();

            if(response_code === '' || response == null){
                $.modal.msg("验证码不能为空");
                return false;
            }

            if(this.code !== response_code){
                $.modal.msg("验证码错误");
                return false;
            }

            return true;
        }
    }
    
  	//解冻申请
    $('.application').on('click', function () {

        layer.prompt({title: '输入申请邮箱，并确认', formType: 0}, function(email, index){

            let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(!reg.test(email)){
                $.modal.alert("邮箱格式不正确");
                return false;
            }
            
            //验证用户状态和邮箱是否符合条件
            
            layer.close(index);

            layer.prompt({title: '输入申请理由，并确认', formType: 2}, function(decire, index){
                layer.close(index);
                layer.msg('演示完毕！您的口令：'+ email +'<br>您最后写下了：'+decire);
                
                //插入一条解冻申请
                
            });

        });
    });
    
    let countdown = 60;
    function setTime(obj) {
        if (countdown === 0) {
            $(obj).prop('disabled', false);
            $(obj).text("点击获取验证码");
            this.countdown = 60;//60秒过后button上的文字初始化,计时器初始化;
            return;
        } else {
            $(obj).prop('disabled', true);
            $(obj).text("("+countdown+"s)后重新发送") ;
            countdown--;
        }
        setTimeout(function() { setTime(obj) },1000) //每1000毫秒执行一次
    }
</script>
</body>
</html>